<template>
  <div class='basic' v-if="$route.name=='demoTable'">
    <!-- breadcrumb start -->
    <!-- <EPageHeader :routes="[
      { path: '/dashboard', breadcrumbName: '工作台' },
      { path: '/demo', breadcrumbName: '基础DEMO' },
      { path: '/demo/table', breadcrumbName: '表格' }
    ]"/> -->
    <!-- breadcrumb end -->

    <div class='basic-content'>
      <!-- search start -->
      <div class='basic-search'>
        <a-form layout="inline">
          <a-form-item label="输入字段:">
            <a-input placeholder="请输入" style="width: 200px" />
          </a-form-item>
          <a-form-item label="下拉字段">
            <a-select placeholder="请选择" default-value="0" style="width: 200px">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">合格</a-select-option>
              <a-select-option value="2">不合格</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="日期字段">
            <a-range-picker @change="onChange" />
            <a-button type="primary" icon="search" style="margin-left: 18px">搜索</a-button>
          </a-form-item>
        </a-form>
      </div>
      <!-- search end -->

      <!-- operate start -->
      <div class="table-operator" style="padding: 20px">
        <p style="float: left; font-size: 18px; font-weight: 700; color: #000">表格标题</p>
        <p style="float: right">
          <a-button type="primary" icon="plus" style="margin-left: 8px" @click="handleAdd">添加</a-button>
        </p>
      </div>
      <!-- operate end -->

      <!-- table start -->
      <!-- <TableList :columns="columns" :dataSource="data" :pagination="true" :tableLoading="loading" :total="100" size="middle" pk="key" mode="checkbox" @queryData="getDatas" /> -->
      <TableList :columns="columns" :dataSource="data" :pagination="true" :tableLoading="loading" :total="100" size="middle" pk="key" @queryData="getDatas" />
      <!-- table end -->

      <!-- form start -->
      <a-modal :maskClosable="false" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
        <template slot="title">
          <div style='display: flex;align-items: center;'>
            <a-icon type="form" style='font-size: 24px;' />
            <div style='margin-left: 8px;font-weight: 700;'>添加数据</div>
          </div>
        </template>
        <FormCreate ref='formCreate' />
      </a-modal>
      <!-- form end -->
    </div>
  </div>
  <router-view v-else></router-view>
</template>

<script>
import TableList from './components/Table.vue'
import FormCreate from './components/Form.vue'

export default {
  name: 'Basic',
  components: {
    TableList,
    FormCreate
  },
  data () {
    return {
      loading: false,
      visible: false,
      confirmLoading: false,
      columns: [
        { title: '序号', key: 'no', scopedSlots: { customRender: 'no' } },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '地址', dataIndex: 'address', key: 'address' },
        { title: '操作项', key: 'action', scopedSlots: { customRender: 'action' }, align: 'center', width: '150px' }
      ],
      data: [
        { key: '1', name: 'John Brown', address: 'New York No. 1 Lake Park' },
        { key: '2', name: 'Jim Green', address: 'London No. 1 Lake Park' }
      ]
    }
  },
  mounted () {
    // this.getDatas()
  },
  methods: {
    async getDatas () {
      console.log('获取列表数据')
      // const res = await this.$http.post('XXXX')
      // console.log(res)
    },
    // 弹窗：添加
    handleAdd () {
      this.visible = true
    },
    // 弹窗：确认
    handleOk () {
      this.confirmLoading = true
      this.$refs.formCreate.handleSubmit()
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    // 弹窗：取消
    handleCancel () {
      this.visible = false
    },
    // 日期改变事件
    onChange (date, dateString) {
      console.log(date, dateString)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
